<template>
    <div class="flex-r-c FilterModalBoxesView">
        <div v-for="(item, index) in data" :key="index" class="itemView">
            <div @click="getindex(index)" :class="index == selcet ? 'buttomViewN flex-r-c' : 'buttomView flex-r-c'">
                <div class="flex-r-c">
                    <img v-if="index == selcet" src="../../assets/images/screenY.png" alt="">
                    <img v-else src="../../assets/images/screenNo.png" alt="">
                    <span>{{ item.name }}</span>
                </div>
            </div>

        </div>
        <div v-if="selcet != null" class="modalView">
            <div v-for="(item, index) in data" :key="index">
                <div v-if="index == selcet" :class="item.buttonPlace == 'right' ? 'flex-c-c item' : 'flex-c-c item'">
                    <div class="screenItemView">
                        <div>
                            <div v-for="(items, indexs) in item.screenData" :key="indexs"
                                :style="{ width: items.width }">
                                <div v-if="items.type == 'checkbox'" class="ItemTypeView flex-c">
                                    <span>{{ items.name }}</span>
                                    <el-checkbox-group v-model="items.value" @change="items.callback">
                                        <el-checkbox v-for="checkboxType in items.data" :label="checkboxType.id"
                                            :key="checkboxType.key">{{ checkboxType.label }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                    <span v-if="!items.data">暂时数据</span>
                                </div>
                                <div v-if="items.type == 'input'" class="ItemTypeView flex-c">
                                    <span>{{ items.name }}</span>
                                    <el-input size="small" v-model="items.value" clearable
                                        :placeholder="items.placeholder ? items.placeholder : '请输入'">
                                    </el-input>
                                </div>
                                <div v-if="items.type == 'location'" class="ItemTypeView flex-c">
                                    <span>{{ items.name }}</span>
                                    <el-cascader :props="cascaderprops" size="small" :options="options" clearable
                                        v-model="items.value" :show-all-levels="false" @change="items.callback">
                                    </el-cascader>
                                </div>
                                <div v-if="items.type == 'select'" class="ItemTypeView flex-c">
                                    <span>{{ items.name }}</span>
                                    <el-select size="small" v-model="items.value" placeholder="请选择"
                                        @change="items.callback" clearable>
                                        <el-option v-for="item in items.data" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div v-if="items.type == 'popup2'"
                                    :class="items.value ? 'ItemTypeView flex-c' : 'ItemTypeView flex-c suffixNO'">
                                    <span>{{ items.name }}</span>
                                    <div :class="item.buttonPlace == 'right' ? 'flex-r-c' : ''">
                                        <el-select size="small" v-model="items.value" multiple filterable remote
                                            reserve-keyword placeholder="请输入关键词搜索" :remote-method="remoteMethod"
                                            :loading="loading">
                                            <el-option v-for="itemss in brandOptions" :key="itemss.value"
                                                :label="itemss.label" :value="itemss.value">
                                            </el-option>
                                        </el-select>
                                        <div v-if="item.buttonPlace == 'right'" class="flex-r-c bottoButton">
                                            <el-button type="primary" size="small" plain
                                                @click="reset(item, index)">重置</el-button>
                                            <el-button type="primary" size="small"
                                                @click="confirm(item, index)">搜索</el-button>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="items.type == 'popup'"
                                    :class="items.value ? 'ItemTypeView flex-c' : 'ItemTypeView flex-c suffixNO'">
                                    <span>{{ items.name }}</span>
                                    <!-- <el-input size="small" v-model="checkboxVlue.value" clearable
                                        :placeholder="items.placeholder ? items.placeholder : '请输入'">
                                    </el-input> -->
                                    <el-select @focus="getselect(items)" @clear="items.callback('')" size="small"
                                        v-model="items.value" placeholder="请选择" clearable>
                                        <el-option v-show="true" v-for="item in items.data" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-dialog append-to-body title="模板选择" center :visible.sync="dialogVisible"
                                        width="50%">
                                        <div class="dialogView">
                                            <div class="dialogleftView">
                                                <el-input class="inputView" size="mini" placeholder="请输入关键字"
                                                    v-model="filterTexts">
                                                    <i slot="suffix" class="el-icon-search flex-r-c-c"></i>
                                                </el-input>
                                                <div class="treeH">
                                                    <el-tree :data="classifytreeData" :props="defaultProps"
                                                        :filter-node-method="filterNode"
                                                        @node-click="handleNodeClick($event, items)" ref="tree"
                                                        node-key="id">
                                                    </el-tree>
                                                </div>
                                            </div>

                                            <div class="dialogrightView">
                                                <div class="searchView flex-r-c">
                                                    <el-input @keyup.enter.native="getinput(items)" size="mini"
                                                        placeholder="请输入关键字" v-model="inputtemplate" clearable
                                                        @clear="getselect(items)">
                                                        <el-button @click="getinput(items)" slot="append"
                                                            icon="el-icon-search" type="info">
                                                        </el-button>
                                                    </el-input>

                                                </div>
                                                <div ref="tableH" class="itemView" style="margin-top:10px">
                                                    <div v-if="items.data.length == 0" style="width:100%"
                                                        class="flex-r-c-c">
                                                        <el-empty description="暂无数据"></el-empty>
                                                    </div>
                                                    <el-table v-if="!items.data.length == 0"
                                                        :header-cell-style="{ background: '#F1F6FB', 'border-right': '1px solid #E7E7E7' }"
                                                        :max-height="tableHeight" ref="singleTable" :data="items.data"
                                                        highlight-current-row
                                                        @current-change="setcheckboxVlue($event, items.checkbox)"
                                                        style="width: 100%">
                                                        <el-table-column width="50">
                                                            <template slot-scope="scope">
                                                                <span
                                                                    :class="checkboxVlue.value == scope.row.value ? 'el-checkbox__input is-checked' : 'el-checkbox__input'">
                                                                    <span
                                                                        :class="checkboxVlue.value == scope.row.value ? 'el-checkbox__inner' : 'el-checkbox__inner'">
                                                                        <i></i>
                                                                    </span>
                                                                </span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column property="id" label="物资模板编码">
                                                            <template slot-scope="scope">
                                                                <span style="color:rgb(31, 143, 255)">{{
                                                                    scope.row.value
                                                                }}</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column property="goodsTemplateName" label="名称">
                                                        </el-table-column>
                                                        <el-table-column width="200" property="goodsTypeName"
                                                            label="所属分类名称">
                                                            <template slot-scope="scope">
                                                                <el-tooltip class="item" effect="dark"
                                                                    :content="scope.row.goodsTypeName" placement="top">
                                                                    <span class="goodsTypeNameText">
                                                                        {{ scope.row.goodsTypeName }}</span>
                                                                </el-tooltip>

                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                    <div class="flex-r-c-e" v-if="!items.data.length == 0">
                                                        <el-pagination @size-change="handleSizeChange($event, items)"
                                                            @current-change="handleCurrentChange($event, items)"
                                                            :current-page.sync="form.page"
                                                            :page-sizes="[10, 20, 50, 100]" :page-size="form.size"
                                                            layout="sizes, prev, pager, next" :total="total">
                                                        </el-pagination>
                                                    </div>
                                                    <!-- <label class="labelView" v-for="checkboxitem in items.data"
                                                        :key="checkboxitem.value"
                                                        @click="setcheckboxVlue(checkboxitem,items.checkbox)">
                                                        <span
                                                            :class="checkboxVlue.value==checkboxitem.value?'el-checkbox__input is-checked':'el-checkbox__input'">
                                                            <span
                                                                :class="checkboxVlue.value==checkboxitem.value?'el-checkbox__inner':'el-checkbox__inner'">
                                                                <i></i>
                                                            </span>
                                                        </span>
                                                        <span class="nametitle">{{checkboxitem.label}}</span>
                                                    </label> -->
                                                </div>
                                            </div>
                                            <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
                                        </div>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button type="primary"
                                                @click="items.callback(checkboxVlue.value), setconfirmVlue(items, checkboxVlue)">
                                                确 定
                                            </el-button>
                                            <el-button @click="dialogVisible = false">取 消</el-button>

                                        </span>
                                    </el-dialog>
                                </div>
                                <div v-if="items.type == 'radio'" class="ItemTypeView flex-c">
                                    <span>{{ items.name }}</span>
                                    <el-radio-group @change="items.callback" v-model="items.value">
                                        <el-radio v-for="(item, index) in items.data" :key="index" :label="item.value">
                                            {{ item.label }}
                                        </el-radio>
                                    </el-radio-group>
                                </div>

                                <!-- <div v-if="items.type=='childrenList'" class="ItemTypeChildrenView flex-c">

                                    <span>{{ items.name }}</span>

                                    <div v-if="items.childrenList">
                                        <div class="flex-c" v-for="(children,i) in items.childrenList" :key="i">
                                            <span class="garyText14" style="margin: 8px;">{{
                                            children.itemName
                                            }}</span>
                                            <div class="threeLevelView flex-r-c" v-if="children.childrenList">
                                                <div class="flex-r-c" style="margin:0px 20px"
                                                    v-for="(childrens,is) in children.childrenList" :key="is">
                                                    <span class="garyText14">{{ childrens.itemName}}</span>
                                                    <el-input v-if="childrens.itemType!='NUMBER'" size="small"
                                                        v-model="childrens.value"
                                                        :placeholder="childrens.placeholder ? childrens.placeholder : '请输入'">
                                                        <template v-if="childrens.unitName"
                                                            slot="append">{{childrens.unitName}}</template>
                                                    </el-input>
                                                    <div v-if="childrens.itemType=='NUMBER'" class="rowNUMBER">
                                                        <el-input style="width:100px" size="small"
                                                            v-model="childrens.startValue" :type="'number'"
                                                            :placeholder="childrens.placeholder ? childrens.placeholder : '请输入'"
                                                            clearable>
                                                        </el-input>
                                                        到
                                                        <el-input style="width:140px" size="small"
                                                            v-model="childrens.endValue" :type="'number'"
                                                            :placeholder="childrens.placeholder ? childrens.placeholder : '请输入'"
                                                            clearable>
                                                            <template v-if="childrens.unitName"
                                                                slot="append">{{childrens.unitName}}</template>
                                                        </el-input>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex-r-c" v-if="!children.childrenList">
                                                <el-input v-if="children.itemType!='NUMBER'" style="width:240px"
                                                    size="small" v-model="children.value"
                                                    :placeholder="children.placeholder ? children.placeholder : '请输入'">
                                                    <template v-if="children.unitName"
                                                        slot="append">{{children.unitName}}</template>
                                                </el-input>
                                                <div v-if="children.itemType=='NUMBER'" class="rowNUMBER">
                                                    <el-input style="width:100px" size="small"
                                                        v-model="children.startValue" :type="'number'"
                                                        :placeholder="children.placeholder ? children.placeholder : '请输入'"
                                                        clearable>
                                                    </el-input>
                                                    到
                                                    <el-input style="width:140px" size="small"
                                                        v-model="children.endValue" :type="'number'"
                                                        :placeholder="children.placeholder ? children.placeholder : '请输入'"
                                                        clearable>
                                                        <template v-if="children.unitName"
                                                            slot="append">{{children.unitName}}</template>
                                                    </el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-r-c" v-if="!items.childrenList">
                                        <el-input v-if="items.itemType!='NUMBER'" style="width:240px" size="small"
                                            v-model="items.value"
                                            :placeholder="items.placeholder ? items.placeholder : '请输入'">
                                            <template v-if="items.unitName" slot="append">{{items.unitName}}</template>
                                        </el-input>
                                        <div v-if="items.itemType=='NUMBER'" class="rowNUMBER">
                                            <el-input style="width:100px" size="small" v-model="items.startValue"
                                                :type="'number'"
                                                :placeholder="items.placeholder ? items.placeholder : '请输入'" clearable>
                                            </el-input>
                                            到
                                            <el-input style="width:140px" size="small" v-model="items.endValue"
                                                :type="'number'"
                                                :placeholder="items.placeholder ? items.placeholder : '请输入'" clearable>
                                                <template v-if="items.unitName"
                                                    slot="append">{{items.unitName}}</template>
                                            </el-input>
                                        </div>
                                    </div>
                                </div> -->
                            </div>
                            <div style="width: 100%;margin-top: 12px;">
                                <TreeInput :data="treeData(item)"></TreeInput>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.buttonPlace != 'right'" class="flex-r-c bottoButton">
                        <el-button type="primary" size="small" plain @click="reset(item, index)">重置</el-button>
                        <el-button type="primary" size="small" @click="confirm(item, index)">搜索</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div @click="setmodalBg" v-if="selcet != null" class="modalBg">

        </div>
    </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
import TreeInput from './TreeInput.vue'
export default ({
    name: 'FilterModalBoxes',
    components: { TreeInput },
    props: {
        data: {
            type: Array,
            default: () => { [] },
        },
        width: {
            type: String,
            default: '100%'
        }
    },
    data() {
        return {
            dialogVisible: false,
            cascaderprops: {
                value: 'id',
                label: 'name',
                emitPath: false
            },
            options: [],
            selectedOptions: [],
            screenWidth: "",
            modalViewYN: false,
            selcet: null,
            option: [],
            checkboxVlue: "",
            classifytreeData: '',
            defaultProps: {
                children: 'childList',
                label: 'goodsName'
            },
            filterTexts: '',
            inputtemplate: '',
            tableHeight: '321',
            form: {
                page: 1,
                size: 10,
                templateName: "",
                goodsTypeId: "",
            },
            total: 1,
            loading: false,
            brandOptions: [],
        }
    },
    watch: {
        filterTexts(val) {
            // console.log(val)
            // this.$refs.tree.filter(val);
            this.$refs.tree[0].filter(val)
        },
        dialogVisible(val) {
            console.log(val)
            if (val) {
                setTimeout(() => {
                    this.gettableH()
                }, 500);
            }
        }
    },
    mounted() {
        // 获取树形分类
        this.getTree()
        // console.log('regionData', regionData)
        //获取地区
        this.getRegion()
        // 获取品牌
        this.getBrand()
        window.onresize = () => {
            return (() => {
                this.$nextTick(() => {
                    this.gettableH()
                });
            })();
        };
    },
    methods: {
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getBrand(query)
                    // this.options = this.list.filter(item => {
                    //     return item.label.toLowerCase()
                    //         .indexOf(query.toLowerCase()) > -1;
                    // });
                }, 200);
            } else {
                this.brandOptions = [];
            }
        },
        getBrand(name) {
            let data = {
                "code": "",
                "name": name,
                "order": "",
                "orderField": "",
                "page": 1,
                "size": 9999
            };
            return this.$api.SearchGoodsBrandListFetch(data).then((res) => {
                console.log('品牌', res)
                if (res.code == 0) {
                    let datas = []
                    for (let e in res.data.list) {
                        let item = {
                            label: res.data.list[e].name,
                            value: res.data.list[e].name,
                            key: res.data.list[e].code,
                            id: res.data.list[e].id,
                            nation: res.data.list[e].nation
                        }
                        // console.log(e, item)
                        datas.push(item)
                    }
                    this.brandOptions = datas
                } else {
                    Message.error(res.message)
                }
                this.loading = false;
            })

        },
        getinput(items) {
            this.checkboxVlue = ''
            this.form.templateName = this.inputtemplate
            this.form.goodsTypeId = ''
            this.form.page = 1
            this.getTemplate({ ...this.form }, items)
        },
        getselect(items) {
            this.dialogVisible = true
            this.checkboxVlue = ''
            this.inputtemplate = ''
            this.form.templateName = ''
            this.form.goodsTypeId = ''
            this.form.page = 1
            this.getTemplate({ ...this.form }, items)

        },
        // currentPage 改变时会触发
        handleCurrentChange(data, items) {
            this.form.page = data

            this.getTemplate({ ...this.form }, items)
        },
        // 	pageSize 改变时会触发
        handleSizeChange(data, items) {
            this.form.size = data
            this.getTemplate({ ...this.form }, items)
        },
        // 获取表格高度
        gettableH() {
            let h = this.$refs.tableH[0].offsetHeight
            console.log('offsetHeight', h)
            this.tableHeight = h - 32
            // 

            // t
        },
        // 获取模板
        getTemplate(data, item) {
            this.checkboxVlue = ''
            return this.$api.SearchGoodsPageFetch({
                ...data,
            }).then((res) => {
                for (let e in res.data.list) {
                    res.data.list[e].label = res.data.list[e].goodsTemplateName
                    res.data.list[e].value = res.data.list[e].id
                }
                item.data = res.data.list
                this.total = res.data.total
                // let data = []
                // if (id) {
                //     this.buttomdata[2].screenData[0].type = "select"
                // } else {
                //     this.buttomdata[2].screenData[0].type = "popup"
                // }
                // data.push(this.buttomdata[2].screenData[0])
                // data[0].value = ''
                // data[0].data = res.data.list
                // this.buttomdata[2].screenData = data
                console.log('Ecology', res.data.list)
            })
        },
        // 
        handleNodeClick(data, item) {
            // this.setectData = data
            console.log(data, item)
            this.inputtemplate = ''
            this.form.goodsTypeId = data.id
            this.form.page = 1
            this.form.templateName = ''
            this.getTemplate({ ...this.form }, item)
            this.gettableH()
            // this.datas = []
            // this.$emit('nodeClick', data)
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.goodsName.indexOf(value) !== -1;
        },
        // 获取树节点数据
        getTree() {
            let data = {
                "goodsName": "",
                "order": "",
                "orderField": ""
            }
            return this.$api.GoodsTypeGoodsTypeListFetch().then((res) => {
                this.classifytreeData = res.data
                // for (let e in this.data) {
                //     this.data[e].img = this.geturl(e, "Y")
                //     this.data[e].imgN = this.geturl(e, "N")
                //     this.data[e].weight = 'bold'
                //     console.log(this.geturl(e, "N"), this.geturl(e, "Y"))
                // }



                // this.treeDataItem = this.data[0]
                // console.log(res)
            })
        },
        // 确定选择
        setconfirmVlue(items, item) {
            if (item) {
                items.value = item.value
                this.dialogVisible = false
            } else {
                this.dialogVisible = false
            }
        },
        // 选择属性值
        setcheckboxVlue(value, type) {
            console.log(value, type)
            if (type == 'one') {

                this.checkboxVlue = { ...value }
            } else {

            }
        },
        // 获取地区值
        getRegion() {
            return this.$api.SearchGoodsGetRegionListFetch().then((res) => {
                console.log('地区', res)
                if (res.code == 0) {
                    function arrayToTree(arr) {

                        // 定义目标数组
                        let obj = []

                        // 循环原始数据
                        for (let i in arr) {

                            // 如果当前索引值的pid为空，那么就代表当前的索引值为“根级”数据，那么直接push到目标数组里
                            if (!arr[i].parentId) {
                                obj.push(arr[i])
                            } else {

                                /**
                                 * 当前索引值的pid不为空时，
                                 * 因为当前的pid就相当于当前元素上一级的id
                                 * 所以要找到原始数据中 哪个item的id等于当前的pid，
                                 * 假设我们找到的元素叫item，那么item就是当前索引值的父级
                                 * 所以item.child 就等于当前的索引值。
                                 * 当我们在原始数据中心找到对应的item，为其设置了child后
                                 * 目标数组obj中对应的item也会同时修改，因为JS中对象的为引用类型，一个地方修改，所有引用的地方都修改
                                 */
                                let item = arr.find(element => element.id == arr[i].parentId)
                                //
                                try {
                                    if (item.children) {
                                        item.children.push(arr[i])
                                    } else {
                                        item.children = []
                                        item.children[0] = arr[i]
                                    }
                                } catch (err) {
                                    console.log(arr[i])
                                    // console.log(err)
                                }
                            }
                        }

                        return obj
                    }
                    function composeTree(list = []) {
                        const data = JSON.parse(JSON.stringify(list)); // 浅拷贝不改变源数据
                        const result = [];
                        if (!Array.isArray(data)) {
                            return result;
                        }
                        data.forEach((item) => {
                            delete item.children;
                        });
                        const map = {};
                        data.forEach((item) => {
                            map[item.id] = item;
                        });
                        data.forEach((item) => {
                            const parent = map[item.parentId];
                            if (parent) {
                                (parent.children || (parent.children = [])).push(item);
                            } else {
                                result.push(item);
                            }
                        });
                        return result;
                    }
                    this.options = composeTree(res.data)
                    console.log('options', arrayToTree(res.data))
                }


                // 循环原始数据

            })

        },
        treeData(data) {
            let datas = []
            for (let e in data.screenData) {
                if (data.screenData[e].type == "childrenList") {
                    datas.push(data.screenData[e])
                }

            }
            // console.log(datas)
            return datas
        },
        // 搜索
        confirm(item, index) {
            this.selcet = null

            this.$emit('confirm', item, index)
        },
        // 重置
        reset(item, index) {
            for (let e in item.screenData) {
                if (item.screenData[e].type == 'checkbox') {
                    item.screenData[e].value = []
                } else {
                    item.screenData[e].value = ''
                }
            }
            this.$emit('reset', item, index)
        },
        // 关闭筛选框
        setmodalBg() {
            this.selcet = null
        },
        // 改变选择时的方法
        getindex(index) {
            // this.modalViewYN = true
            this.selcet = index
            console.log(index)
        }
    },
    computed: {
        getmoder(i, e) {
            return i == e
        }
    },
})
</script>

<style scoped lang="scss">
.goodsTypeNameText {

    width: 100%;
    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;
}

.treeH::-webkit-scrollbar {
    width: 0 !important
}

.treeH {
    height: calc(100% - 30px);
    /* flex: auto; */
    /* position: relative; */
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}

.nametitle {
    // margin: 20px;
    display: inline-block;
    padding-left: 10px;
    line-height: 19px;
    font-size: 14px;
    color: #606266;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}

.dialogView {
    // border: 1px #EAEEF5 solid;
    max-height: 60vh;
    // overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: row;

    .dialogleftView {
        background: #F8FBFC;
        display: flex;
        flex-direction: column;
        width: 220px;
        padding-left: 15px;
        padding-right: 10px;
        border-right: 1px #EAEEF5 solid;

        .el-tree {
            background: #F8FBFC;
        }
    }

    .dialogrightView {
        width: calc(100% - 246px);
        display: flex;
        flex-direction: column;
        // height: 100%;
        flex: auto;

        .searchView {
            margin: 10px 24px 0px 20px;
            margin-bottom: 0px;

            span {
                width: 80px;
            }
        }

        .itemView::-webkit-scrollbar {
            width: 0px !important;
            background: #FFF;
            border-radius: 4px;

        }

        .itemView {
            height: calc(100% - 48px);
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            display: flex;
            flex-direction: row;
            direction: flex;
            flex-direction: column;
            margin: 0px 24px 0px 20px;

            // .el-table {
            //     max-height: 100% !important;
            // }


            .labelView {
                // margin-left: 20px;
            }
        }
    }
}

// .dialogView::-webkit-scrollbar {
//     width: 0px !important;
//     background: #FFF;
//     border-radius: 4px;

// }

/* .rowNUMBER {
    display: flex;
    flex-direction: row;
    align-items: center;
    -webkit-appearance: none;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    font-size: inherit;
}

.rowNUMBER>>>.el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    border-radius: 4px;
    border: 0px solid #DCDFE6 !important;
    box-sizing: border-box;
    color: #606266;
    font-size: inherit;
} */

.threeLevelView {
    flex-wrap: wrap;
}

.garyText14 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #667595;
    line-height: 22px;
}


.ItemTypeView {
    .el-radio-group .is-checked {
        margin: 0px;
        /* width: 60px; */
        padding: 0px 12px;
        height: 32px;
        background: rgba(63, 142, 255, 0.1);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-right: 24px;
    }

    .el-radio-group .el-radio .el-radio__input {
        display: none;
    }

    .el-radio-group {
        display: flex;
        flex-direction: row;
    }
}

.ItemTypeView {
    .el-radio-group .el-radio {

        height: 32px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0px 12px;
        margin: 0px;
    }
}

.ItemTypeView {
    .el-radio-group .el-radio span {
        padding: 0px;

    }
}

.ItemTypeChildrenView {
    margin-top: 16px;
}

.ItemTypeView {

    margin-top: 16px;
    /* align-items: flex-start; */
}

.ItemTypeChildrenView .el-input {
    width: 100%;
}

.ItemTypeView .el-input {
    width: 80%;
}

.ItemTypeView .el-cascader--small {
    width: 80%;
}

.ItemTypeView .el-select {
    width: 80%;
}

.ItemTypeChildrenView>span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #667595;
    line-height: 22px;
    text-align: left;
    /* margin-bottom: 8px; */
}

.ItemTypeView>span {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #667595;
    line-height: 22px;
    /* margin-right: 15px; */
    /* width: 100px; */
    text-align: left;
    margin-bottom: 8px;
}

.FilterModalBoxesView {
    position: relative;
}

.FilterModalBoxesView .modalBg {
    z-index: 1501;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    min-width: 1366px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.08);
    /* background: #3F8EFF; */
}

.FilterModalBoxesView .modalView {
    z-index: 1502;
    width: calc(100vw - 284px);
    /* height: 184px; */
    background: #FFFFFF;
    box-shadow: 0px 12px 24px 0px rgba(28, 47, 95, 0.08);
    border-radius: 0px 0px 8px 8px;
    position: absolute;
    top: 32px;
}

.modalView .item {
    width: 100%;

}

.modalView .item .screenItemView {
    width: 100%;
    /* display: flex;
    flex-direction: row;
    flex-wrap: wrap; */
}

.modalView .item .screenItemView>div::-webkit-scrollbar {
    width: 0 !important
}

.modalView .item .screenItemView>div {
    width: calc(100% - 48px);
    max-height: calc(100vh - 250px);
    overflow-y: scroll;
    padding: 8px 24px 0px 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}

.modalView .item .bottoButton {
    padding: 24px;
}

.FilterModalBoxesView .itemView {
    z-index: 2;
    cursor: pointer;
}

.FilterModalBoxesView .itemView .buttomView {
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #EAEEF5;
    margin-right: 8px;
}

.FilterModalBoxesView .itemView .buttomViewN {
    height: 32px;
    background: #3F8EFF;
    border-radius: 4px;
    /* border: 1px solid #EAEEF5; */
    margin-right: 8px;
}

.FilterModalBoxesView .itemView div>div {
    margin: 0px 16px;
}

.FilterModalBoxesView .itemView div>div>img {
    width: 8px;
    height: 12px;
    margin-right: 4px;
}

.FilterModalBoxesView .itemView .buttomView>div>span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7781A0;
    line-height: 20px;

}

.FilterModalBoxesView .itemView .buttomViewN>div>span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 20px;
}
</style>